<template>
  <div class="app-container">
    <div class="top-box">
      <div class="ry-top">
        <img src="@/assets/images/ry-top.png" class="logo" />
      </div>
      <span>账号权限配置</span>
    </div>
    <div class="tabs-box">
      <div class="operation">
        <el-dropdown @command="handleAddDemand" trigger="click">
          <el-button type="primary" icon="el-icon-plus">
            账号录入<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">账号录入</el-dropdown-item>
            <el-dropdown-item command="2">批量录入</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <div class="right">
          <span class="label">成员分类</span>
          <el-select v-model="queryParams.postId" style="width: 227px;margin: 0 15px;" placeholder="选择成员分类" @change="handleQuery">
            <el-option
              v-for="item in memberTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input
            class="input"
            placeholder="查找用户"
            prefix-icon="el-icon-search"
            @blur="handleQuery"
            v-model="queryParams.userName">
          </el-input>
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">批量导出</el-dropdown-item>
              <el-dropdown-item command="2">批量删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-table
        v-loading="loading"
        height="400"
        :header-cell-style="{
              'background-color': '#F9F9F9'
            }"
        :data="configList"
        @selection-change="handleSelectionChange"
        border
        :row-class-name="tableClass">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="用户名" align="left" prop="userName" sortable>
          <template slot-scope="scope">
                <span v-if="scope.row.nickName">
                  <span class="icon-name red">{{ scope.row.nickName[scope.row.nickName.length - 1] }}</span>
                  <span>{{ scope.row.nickName }}</span>
                </span>
          </template>
        </el-table-column>
        <el-table-column label="角色" align="center" prop="roleName" />
        <el-table-column label="成员分类" align="center" prop="postName" />
        <el-table-column label="账号" align="center" prop="userName" />
        <el-table-column label="权限" align="center" prop="dataScope">
          <template slot-scope="scope">
            <span v-if="scope.row.dataScope == 1">全部</span>
            <span v-else>自定义</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" header-align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-popconfirm
              title="确定删除吗？"
              @confirm="handleDelete(scope.row, 'single')"
            >
              <el-button
                size="mini"
                slot="reference"
              >删除</el-button>
            </el-popconfirm>
            <el-button
              size="mini"
              style="margin-left: 15px"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <account-input ref="account" @upDate="getList" />
    <batch-account-input ref="batchAccount" />
  </div>
</template>

<script>
import {list} from "@/api/projectManage/task";
import AccountInput from "@/views/projectManage/accountPowerCig/accountInput";
import BatchAccountInput from "@/views/projectManage/accountPowerCig/batchAccountInput";
import {userBypostId, userListByPostId} from "@/api/projectManage/membership";
import {mixin} from "@/views/projectManage/mixin";
export default {
  name: "Config",
  mixins: [mixin],
  components: {BatchAccountInput, AccountInput},
  data() {
    return {
      memberTypeList: [
        {
          label: '全部',
          value: 1
        }
      ],
      configList: [
        {
          userName: '张三',
          memberType: '项目经理',
          account: 'admin',
          enterTime: '2023-02-01 12:09:11'
        }
      ],
      loading: false,
      queryParams: {},
      total: 0,
      projectList: [
        {
          id: 1,
          name: '管理员工作台（政务外网）'
        }
      ],
      defProject: '管理员工作台（政务外网）'
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 请求列表
    getList() {
      this.configList = []
      const params = {
        cProNo: this.projectInfo.cProNo
      }
      this.loading = true
      userListByPostId(params).then(res => {
        this.configList = res || []
      }).finally(() => this.loading = false)
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    // 分页
    currentChang(val) {
      this.queryParams.pageNum = val.page
      this.queryParams.pageSize = val.limit
      this.getList()
    },
    // 修改
    handleUpdate(row) {

    },
    // 删除
    handleDelete() {

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection)
    },
    // 选择项目
    commandProject(command) {
      console.log(command)
    },
    // 更多操作
    handleCommand(command) {
      console.log(command)
    },
    // 添加账号
    handleAddDemand(val) {
      if (val == 1) this.$refs.account.open()
      if (val == 2) this.$refs.batchAccount.open()
      //
    },
    //偶数加背景色
    tableClass({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        //奇数行，序号不能被2整除
        return "even-row";
      } else {
        return "";
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/projectManage";
::v-deep .workInput {
  width: 80%;
  .el-input__inner {
    text-align: center;
    border-radius: 20px;
    background: #dedede40;
  }
}
.tabs-box {
  padding-top: 10px;
}
.label {
  line-height: 36px;
}
.top-box {
  display: flex;
  .ry-top {
    width: 28px;
    height: 28px;
    margin: 10px 15px 0 20px;
    border-radius: 6px;
    background: #C50405;
    img {
      width: 20px;
      height: 20px;
      margin: 0!important;
      transform: translate(4px, -6px)!important;
    }
  }
}

</style>
